<template>
	<view>
		<view v-if="speeching" class="box-speeching">
			<view :class="'timer ' + (action == 'cancel' ? 'warning' : '')">
				<view>
					<text class="time">{{ timeStr }}</text>
				</view>
				<view class="wave">
					<view :class="'line line' + index" v-for="(item, index) in 7" :key="index"></view>
					<view :class="'line line' + (6 - index)" v-for="(item, index) in 7" :key="index"></view>
					<view :class="'line line' + index" v-for="(item, index) in 7" :key="index"></view>
				</view>
			</view>
			<view class="nowinput">
				<view class="tips">松手发送 上滑取消</view>
				<view class="btn-record">
					<image src="/others/static/images2/ic_input_audio.png"></image>
				</view>
			</view>
		</view>
		<view>
			<button class="btn-audio-press" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="doCancel" @touchmove="onTouchMove">按住 说话</button>
		</view>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			action: 'send',
			speeching: false,
			windowHeight: 0,
			timeStr: '00:00',
			timeCount: 0,
			timeSi: 0,
			recorderManager: null,
			audioFile: '',
			audioLength: 0
		};
	},
	props: {},
	mounted() {
		const system = wx.getSystemInfoSync();
		this.windowHeight = system.windowHeight;
	},
	methods: {
		doSend() {
			if (!this.audioFile) {
				uni.showToast({
					title: '录音失败',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			console.log('send');
			this.$emit('send', {
				detail: {
					audioFile: this.audioFile,
					audioLength: this.audioLength
				}
			});
		},

		doCancel() {
			console.log('cancel');
			clearInterval(this.timeSi);
		},

		onTouchMove(e) {
			// console.log(this.windowHeight,'11111111111===>')
			// console.log(e.touches[0].clientY,'2222222===>')
			const windowHeight = this.windowHeight;
			const clientY = e.touches[0].clientY;
			if (windowHeight - clientY > 100) {
				this.action = 'cancel';
			} else {
				this.action = 'send';
			}
		},

		onTouchEnd() {
			setTimeout(() => {
				let recorderManager = this.recorderManager;
				if (recorderManager) {
					recorderManager.stop();
				}
				console.log('onTouchEnd');
				setTimeout(() => {
					if (this.action == 'send') {
						this.doSend();
					} else {
						this.doCancel();
					}
					this.stopSpeech();
				}, 300);
			}, 200);
		},

		onTouchStart() {
			this.speeching = true;
			this.$emit('stopPlay');
			this.startSpeech();
		},

		stopSpeech() {
			clearInterval(this.timeSi);
			if (this.recorderManager) {
				this.recorderManager.stop();
			}
			console.log('stopSpeech');
			this.timeSi = 0;
			this.timeCount = 0;
			this.timeStr = '00:00';
			this.speeching = false;
			this.action = 'send';
			this.recorderManager = null;
			this.audioFile = '';
			this.audioLength = 0;
		},

		startSpeech() {
			const _this = this;
			uni.authorize({
				scope: 'scope.record',
				success() {
					_this.startRecord();
				},
				fail() {
					_this.stopSpeech();
					uni.showModal({
						title: '提示',
						content: '请授权麦克风权限',
						confirmText: '去授权',
						success: function (res) {
							if (res.confirm) {
								uni.openSetting();
							}
						}
					});
				}
			});
		},

		startRecord() {
			let recorderManager = uni.getRecorderManager();
			recorderManager.onStart(() => {
				// 开始计时
				let timeSi = setInterval(() => {
					let timeStr = '';
					let timeCount = this.timeCount + 1;
					if (timeCount >= 60) {
						this.$emit('send');
						this.stopSpeech();
						return;
					}
					if (timeCount < 10) {
						timeStr = '00:0' + timeCount;
					} else {
						timeStr = '00:' + timeCount;
					}
					this.timeCount = timeCount;
					this.timeStr = timeStr;
				}, 1000);
				this.timeSi = timeSi;
			});
			recorderManager.onStop((res) => {
				console.log('onStop');
				if (!res.duration || res.duration < 1000) {
					uni.showToast({
						title: '时间太短了',
						icon: 'none',
						duration: 2000
					});
					this.action = 'cancel';
					// this.stopSpeech()
				}
				this.audioFile = res.tempFilePath;
				this.audioLength = res.duration;
			});
			recorderManager.onError((res) => {
				console.log('onError', res);
				let message = '录音启动失败';
				if (res.errMsg.indexOf('NotFoundError') != -1) {
					message = '没找到麦克风';
				} else if (res.errMsg.indexOf('recorder not start') != -1) {
					return;
				}
				uni.showToast({
					title: message,
					icon: 'none',
					duration: 2000
				});
			});
			recorderManager.start({
				sampleRate: 16000,
				duration: 60000,
				// 录音最长时长，单位：毫秒
				format: 'wav',
				numberOfChannels: 1
			});

			this.recorderManager = recorderManager;
		}
	},
	created: function () {}
};
</script>
<style lang="scss">
.box-speeching {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 99;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
}
.box-speeching .timer {
	width: 520rpx;
	height: 188rpx;
	background: #04babe;
	color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	z-index: 2;
	text-align: center;
	padding: 30rpx 0;
	box-sizing: border-box;
	transition: all 0.1s;
}
.box-speeching .timer.warning {
	background: #e63803;
}
.box-speeching .timer .time {
	letter-spacing: 4rpx;
	font-size: 36rpx;
	font-weight: bold;
}

.btn-audio-press {
	background: none;
	font-size: 28rpx;
	color: #444;
	/* border: none; */
	box-shadow: none;
	padding: 0;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-speeching .nowinput {
	background: none;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
}
.box-speeching .nowinput .tips {
	position: absolute;
	bottom: 220rpx;
	left: 0;
	width: 100%;
	color: #fff;
	text-align: center;
	line-height: 64rpx;
	letter-spacing: 2rpx;
}
.box-speeching .nowinput .btn-record {
	width: 130%;
	height: 400rpx;
	background: linear-gradient(to top, #fff 50%, #ddd);
	border-radius: 50% / 200rpx;
	position: absolute;
	bottom: -200rpx;
	left: -15%;
}

.box-speeching .nowinput .btn-record image {
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	left: 50%;
	top: 48rpx;
	margin-left: -32rpx;
}

/**声音动画**/
.wave {
	width: 342rpx;
	height: 48rpx;
	margin: 20rpx auto 0 auto;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wave .line {
	width: 4rpx;
	height: 36rpx;
	background-color: #f7f7f8;
	margin: 0 4rpx;
	border-radius: 4rpx;
	display: inline-block;
}
@keyframes jump {
	0% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(1, 0.2);
	}
}
.wave .line0 {
	animation: jump 0.5s 1.6s linear infinite alternate;
}
.wave .line1 {
	animation: jump 0.5s 1.4s linear infinite alternate;
}
.wave .line2 {
	animation: jump 0.5s 1.2s linear infinite alternate;
}
.wave .line3 {
	animation: jump 0.5s 1s linear infinite alternate;
}
.wave .line4 {
	animation: jump 0.5s 0.8s linear infinite alternate;
}
.wave .line5 {
	animation: jump 0.5s 0.6s linear infinite alternate;
}
.wave .line6 {
	animation: jump 0.4s linear infinite alternate;
}
</style>